<template>
  <div class="com-container">
    <div class="com-chart" ref="seller_ref"></div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data(){
    return{
      chartInstance:'',
      allData:'',//服务器返回的数据
      currentPage:1,//当前显示的页数
      totalPage:0,//总的页数
      timerTd:''//定时器的标识
    }
  },
  created () {
    // 在组件创建完成之后 进行回调函数的注册
    this.$socket.registerCallBack('sellerData', this.getData)
  },
  computed: {
    ...mapState(['theme'])
  },
  watch: {
    theme () {
      console.log('主题切换了','seller')
      this.chartInstance.dispose() // 销毁当前的图表
      this.initChart() // 重新以最新的主题名称初始化图表对象
      this.screenAdapter() // 完成屏幕的适配
      this.updataChart() // 更新图表的展示
      console.log('主题切换了','seller')
    }
  },
  mounted () {
    this.initChart()
    // this.getData()
    this.$socket.send({
      action: 'getData',
      socketType: 'sellerData',
      chartName: 'seller',
      value: ''
    })
    window.addEventListener('resize', this.screenAdapter)
    // 在页面加载完成的时候, 主动进行屏幕的适配
    this.screenAdapter()
  },
  destroyed () {
    // 防止内存泄漏的问题
    // 销毁定时器
    clearInterval(this.timerId)
    // 在组件销毁的时候, 需要将监听器取消掉
    window.removeEventListener('resize', this.screenAdapter)
    this.$socket.unRegisterCallBack('sellerData')
  },
  methods:{
    // 初始化echarInstance对象
    initChart(){
      // 创建chartInstance对象
      this.chartInstance = this.$echarts.init(this.$refs.seller_ref, this.theme)
      // 对图表初始化的配置的控制
      const initOption = {
        // 图表标题的配置
        title:{
          text:'▎商家销售统计',
          top:20,
          left:20
        },
        // 图标专属配置
        grid:{
          top:'20%',
          left:'3%',
          right:'6%',
          bottom:'3%',
          containLabel:true //距离是包含坐标轴上的文字的
        },
        // 使用x坐标为值的坐标，呈现的是横向的柱状图
        xAxis:{
          type:'value'
        },
        // Y轴配置
        yAxis:{
          type:'category',
        },
        // 背景配置（工具提示）
        tooltip:{
          // 小提示
          trigger:'axis',
          // 背景线
          axisPointer:{
            type:'line',
            z:0,
            lineStyle:{
              color:'#2D3443'
            }
          }
        },
        // 柱的配置
        series:[
          {
            type:'bar',
            // 文字配置
            label:{
              show:true,
              position:'right',
              textStyle:{
                color:'white'
              }
            },
            // 柱的配置
            itemStyle:{
              // 颜色渐变:指明颜色渐变的方向，指明不同百分比下的颜色的值
              color:new this.$echarts.graphic.LinearGradient(0,0,1,0,[
                // 百分之零的颜色值
                {
                  offset:0,
                  color:'#5052EE'
                },
                // 百分之百的颜色值
                {
                  offset:1,
                  color:'#AB6EE5'
                }
              ])
            }
          }
        ]
      }
      this.chartInstance.setOption(initOption)
      // 对图标对象进行鼠标事件监听
      // 鼠标移入时计时器停止
      this.chartInstance.on('mouseover',()=>{clearInterval(this.timerTd)})
      // 鼠标移出时计时器开始
      this.chartInstance.on('mouseout',()=>{this.startInterval()})

    },
    // 获取服务器的数据
    async getData(res){
      // 服务器地址：http.//127.0.0.1:8888/api/seller
      // const {data:res} = await this.$http.get('/seller')
      this.allData = res
      // console.log(this.allData)
      // 获取当前页数(没五个一页)
      // floor：下退 Math.floor(12.9999) = 12 
      // ceil：上进 Math.ceil(12.1) = 13; 
      // round: 四舍五入 Math.round(12.5) = 13 Math.round(12.4) = 12
      this.totalPage = Math.ceil(this.allData.length/5)
      // 对数据进行排序
      this.allData.sort((a,b)=>{
        return b.value - a.value
      })
      // 第一次更新图表
      this.updataChart()
      // 启动定时器
      this.startInterval()
    },
    // 更新图表
    updataChart(){
      const start = (this.currentPage - 1) * 5
      const end = this.currentPage * 5
      // 需要展示的内容
      const showData = this.allData.slice(start,end)
      // 数据的名称数组，y轴数据
      const sellerNames = showData.map((item)=>{
        return item.name
      })
      // 数据的值数组，x轴数组
      const sellerValues = showData.map((item)=>{
        return item.value
      })
      // 当获取数据之后再次设置option
      const dataOption = {
        // Y轴配置
        yAxis:{
          data:sellerNames
        },
        
        // 柱的配置
        series:[
          {
            data:sellerValues,
          }
        ]
      }
      this.chartInstance.setOption(dataOption)
    },
    // 设置定时器
    startInterval(){
      // 如果定时器存在，则先要销毁定时器
      if(this.timerTd){
        clearInterval(this.timerTd)
      }
      this.timerTd = setInterval(()=>{
        this.currentPage++
        if(this.currentPage>this.totalPage){
          this.currentPage = 1
        }
        this.updataChart()
      },3000)
    },
    // 屏幕适配,当浏览器的大小发生变化的时候，则会调用该方法。
    screenAdapter(){
      // console.log(this.$refs.seller_ref.offsetWidth)
      const titleFontSize = this.$refs.seller_ref.offsetWidth / 100 * 3.6
      // 和分辨率大小相关的的配置项
      const adapterOption = {
        // 图表标题的配置
        title:{
          textStyle:{
            // 标题文字
            fontSize:titleFontSize
          },
        },
        // 背景配置（工具提示）
        tooltip:{
          // 背景线
          axisPointer:{
            lineStyle:{
              width:titleFontSize,
            }
          }
        },
        // 柱的配置
        series:[
          {
            // 柱的宽度
            barWidth:titleFontSize,
            // 柱的配置
            itemStyle:{
              // 右半部分的圆角效果
              barBorderRadius:[0,titleFontSize/2,titleFontSize/2,0],//左上，右上，右下，左下
            }
          }
        ]
      }
      this.chartInstance.setOption(adapterOption)
      // 手动的调用图表对象的resize，才能产生效果。
      this.chartInstance.resize()
    }
  }
}
</script>

<style>

</style>